<script setup lang="ts">
import { MenuItem, ElMenuRef } from './type'
import { getMenuData } from './model'

const firstItemIndex = '0'
const menuRef = ref<ElMenuRef | null>(null)

const emit = defineEmits<{
  (event: 'change', value: string): void
  (event: 'expand', value: boolean): void
}>()

const menuData = ref<MenuItem[]>(getMenuData())

function onMenuSelected(value: string) {
  emit('change', value)
}

function onMenuOpen(index: string) {
  if (index === firstItemIndex) {
    emit('expand', true)
  }
}

function onMenuClose(index: string) {
  if (index === firstItemIndex) {
    emit('expand', false)
  }
}

defineExpose({
  open() {
    menuRef.value?.open(firstItemIndex)
  },
  close() {
    menuRef.value?.close(firstItemIndex)
  }
})
</script>

<template>
  <ElMenu
    class="aside-menu"
    mode="vertical"
    default-active=""
    :default-openeds="[firstItemIndex]"
    @select="onMenuSelected"
    @open="onMenuOpen"
    @close="onMenuClose"
    ref="menuRef"
  >
    <ElMenuItem class="home-item" index="home">Home</ElMenuItem>
    <ElScrollbar class="scroll">
      <MenuItems :items="menuData" />
    </ElScrollbar>
  </ElMenu>
</template>

<style lang="scss" scoped>
.aside-menu {
  position: relative;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  border-right: none;

  .home-item {
    padding-left: 8px !important;
  }

  .scroll {
    flex: 1;
    border-right: solid 1px var(--el-menu-border-color);
    //   position: absolute;
    //   top: 56px;
    //   width: 100%;
    //   height: calc(100% - 56px);
  }
}
</style>
